import React from 'react';
import path from 'path';
import { PropTypes } from 'prop-types';
import { Link } from 'react-router-dom';
import './style.less';

const SideNavigation = ({ data }) => {
  const home = {
    name: 'home',
    title: 'Home'
  };
  const computedData = [home, ...data];
  const hash = window.location.hash;
  const currentRoute = hash.includes('home') ? 'home' : hash.split('/').slice(2).join('/');

  return (
    <div
      id="side-navigation"
    >
      <div className="navigation">
        <div className="nav-container">
          {
            computedData.map(
              item => <Link style={currentRoute === item.name ? { background: 'lightblue' } : { background: '#eef5fa' }} to={`${path.join('/', item.pathPrefix || '', item.name)}`}>{item.name}</Link>
            )
          }
        </div>
      </div>
    </div>
  )
}

SideNavigation.propTypes = {
  data: PropTypes.array
}

SideNavigation.defaultProps = {
  data: []
}

export default SideNavigation;
